import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14

Item {


    id: root

    // public ====================================================================
    property int pageCount: 20  // 总页数
    property int pagerCount: pageCount  // 最大展示页码数
    property int page: 1        // 当前页码

    // Item样式
    property real itemSize: 30*dp
    property real itemRadius: 2*dp

    property bool defaultMode1: false

    // 未选中样式
    property color item_color: "transparent"     // 背景颜色
    property color text_color: "#444444"         // 文字颜色

    // 选中的样式
    property color item_color_selected: "transparent"        // 背景颜色
    property color text_color_selected: config.themeColor    // 文字颜色

    property bool goToPage: false           // 是否显示[跳转页面]

    // private ====================================================================


    property int start: Math.min(Math.max(1, page - Math.floor(pagerCount/2)), pageCount - pagerCount + 1)
    property int end: start + pagerCount - 1


    height: itemSize           // 决定Item尺寸了
    width: layout_item.implicitWidth

    Component.onCompleted: {
        if(defaultMode1){
            item_color = "#F4F4F4"
            item_color_selected = Qt.binding(function(){return config.themeColor})
            text_color = "#444444"
            text_color_selected = "white"
        }
    }


    Row{
        id: layout_item
        spacing: 5*dp

        // 左边箭头
        CustomPaginationItem{
            title: "<"
            onClicked: {
                page = Math.max(1, page - 1)
            }
        }
        // 左侧省略号
        CustomPaginationItem{
            title: "···"
            visible: {
                start > 1
            }
            onClicked: {
                page = Math.max(page - pagerCount, 1)
            }
        }



        // 中间的数字
        Repeater{
            model: Math.min(pagerCount, pageCount)
            CustomPaginationItem{
                title: (index + start).toString()
                selected: page.toString() === title
                onClicked: {
                    page = parseInt(title)
                }
            }

        }

        // 右侧省略号
        CustomPaginationItem{
            title: "···"
            visible: {
                end < pageCount
            }
            onClicked: {
                page = Math.min(page + pagerCount, pageCount)
            }
        }


        // 右边箭头
        CustomPaginationItem{
            title: ">"
            onClicked: {
                page = Math.min(page+1, pageCount)
            }
        }

        Item{
            visible: goToPage
            height: itemSize
            width: button_jump.x + button_jump.width
            Rectangle{
                id: rect_edit_jump
                x: 20*dp
                height: itemSize
                width: itemSize * 1.8
                border.color: "#D4D4D4"
                radius: 3*dp
                clip: true
                TextInput{
                    id: edit_jump
                    text: page
                    anchors.fill: parent
                    leftPadding: 10*dp
                    rightPadding: 10*dp
                    font.pixelSize: config.fontsize
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    maximumLength: Math.ceil(Math.log(pageCount))
                    selectByMouse: true //设置为可以被鼠标选中
                    validator: RegExpValidator{
                        regExp: /^[-+]?\d+/
                    }
                }
            }
            CustomButton{
                id: button_jump
                x: rect_edit_jump.width + 24*dp
                height: itemSize
                width: 40*dp
                defaultMode3: true
                title: "跳转"
                onClicked: {
                    let newPage = parseInt(edit_jump.text)
                    root.page = Math.min(Math.max(1, newPage), pageCount)
                    edit_jump.text = Qt.binding(function(){return page})
                }
            }
        }

    }





}
